<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿iPhone 计算器</title>
    <style>
        .calculator {
            border-spacing: 10px;
            background: black;
        }
        .calculator td {
            width: 73px;
            height: 73px;
            line-height: 73px;
            border-radius: 73px;
            background: #333333;
            text-align: center;
            color: #fff;
            font-size: 28px;
            cursor: default;
        }
        .calculator td.control {
            background: #a6a6a6;
            color: #000;
        }
        .calculator td.operate,
        .calculator td.calculate {
            background: #fe9500;
            color: #ffffff;
        }
        .calculator td.display {
            background: #000;
            color: #ffffff;
            text-align: right;
            font-size: 60px;
        }    
        .calculator td:hover,
        .calculator td.active {
            filter: brightness(1.5);
        }                  
    </style>
</head>
<body>
    <table class="calculator">
        <tr>
            <td colspan="4" class="display">0</td>
        </tr>
        <tr>
            <td class="control">ac</td>
            <td class="control">±</td>
            <td class="control">％</td>
            <td class="operate">÷</td>
        </tr>
        <tr>
            <td class="number">7</td>
            <td class="number">8</td>
            <td class="number">9</td>
            <td class="operate">✖</td>
        </tr>
        <tr>
            <td class="number">4</td>
            <td class="number">5</td>
            <td class="number">6</td>
            <td class="operate">-</td>
        </tr>
        <tr>
            <td class="number">1</td>
            <td class="number">2</td>
            <td class="number">3</td>
            <td class="operate">+</td>
        </tr>
        <tr>
            <td colspan="2">0</td>
            <td class="number">.</td>
            <td class="calculate">=</td>
        </tr>
    </table>
    <img src="../calculator.png" style="width: 350px;">
    <script>    
        var calculatorEle = document.querySelector('.calculator');
        var displayEle = document.querySelector('.display');

        var firstNumber = 0, oprator =  '', secondNumber = 0;
        calculatorEle.addEventListener('click', function (event) {
            console.log(event)
            var className = event.srcElement.className
            var value = event.srcElement.innerText
            if (oprator && className === 'number') {
                firstNumber = Number(value)
            } else if (className === 'operate') {
                oprator = value
            } else if (!oprator && className === 'number') {
                secondNumber = value
            } else if (className === 'calculate') {

            }
            display()
        }, false)
        function display () {
            if (firstNumber && oprator && secondNumber) {
                displayEle.innerText = firstNumber * oprator * secondNumber
            } else if (!secondNumber) {
                displayEle.innerText = firstNumber
            } else {
                displayEle.innerText = secondNumber
            }
        }
    </script>
</body>
</html>